<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="A" style="width: 200px; height: 100px; background-color: #999;">
    <div id="B" style="width: 50%; height: 100px; background-color: #555;"></div>
</div>
<script>

    var A = document.getElementById('A');
    var B = document.getElementById('B');

    A.addEventListener('mousedown', function(e) {
        console.log('capture A down');
    }, true);

    B.addEventListener('mousedown', function(e) {
        console.log('capture B down');
        e.stopPropagation();
        return false;
    }, true);

    A.addEventListener('mouseup', function(e) {
        console.log('capture A up');
    }, true);

    B.addEventListener('mouseup', function(e) {
        console.log('capture B up');
    }, true);

    A.addEventListener('click', function(e) {
        console.log('capture A click');
    }, true);

    B.addEventListener('click', function(e) {
        console.log('capture B click');
    }, true);

    A.addEventListener('mousedown', function(e) {
        console.log('A down');
    });

    B.addEventListener('mousedown', function(e) {
        console.log('B down');
    });

    A.addEventListener('mouseup', function(e) {
        console.log('A up');
    });

    B.addEventListener('mouseup', function(e) {
        console.log('B up');
    });

    A.addEventListener('click', function(e) {
        console.log('A click');
    });

    B.addEventListener('click', function(e) {
        console.log('B click');
    });

</script>
</body>
</html>